A custom overlay must contain a html and a json file.
In the json-file you must add a name for the custom overlay.

If the custom overlay sholud be configable, you must also include another html file, which is named exactly as the first html file but you must add 'Config' before the '.html', i.e. example.html and exampleConfig.html. The json file must then also contain the width and height of the config window.
In the config file you must bind in ElgatoGameCapture.js. You can set your needed settings either with 'window.ElgatoGameCapture.setCustomOverlaySetting(name, data);' for single a setting or 'window.ElgatoGameCapture.saveCustomOverlaySettings(settingsJson);' for the complete settings as s json. and a javascript function named saveOverlayConfiguration() must be added in which you must call 'window.ElgatoGameCapture.saveCustomOverlaySettings();' with the settings you want to be saved as a json structur.

Within the main html file you can request your settings via a callback with one parameter by calling the function 'window.ElgatoGameCapture.getCustomOverlaySetting(name, callback)' for single a setting or 'window.ElgatoGameCapture.getCustomOverlaySetting(callback)' for the complete settings as s json.

Please look at the provided example which includes a simple custom overlay to demonstrate what is needed to create your own custom overlays.